import React, {
    Component,
} from 'react';

import {
    Text,
    View,
    TouchableWithoutFeedback,
    TextInput,
    ToastAndroid,
} from 'react-native';

import { connect } from 'react-redux';

import { login } from "../../actions/reglogin";

import CXIcon from "../../components/cxicon/CXIcon";

import styles from "./css/login";

class LoginScreen extends Component {
    static navigationOptions = {
        title: "手机登录",
    };

    constructor(props){
        super(props);
        this.state = {
            phone_focus: false,
            pwd_focus: false,
            phone: "",
            password: ""
        }
    }

    _focus(item){
        if(item == 'phone'){
            this.setState({
                phone_focus: true,
                pwd_focus: false
            });
        }else{
            this.setState({
                phone_focus: false,
                pwd_focus: true
            });
        }
    }

    _handleLogin(){
        if(this.state.phone.length == 0){
            ToastAndroid.showWithGravity("请输入正确手机号", ToastAndroid.SHORT, ToastAndroid.CENTER);
        }else if(this.state.password.length < 4){
            ToastAndroid.showWithGravity("密码长度有误", ToastAndroid.SHORT, ToastAndroid.CENTER);
        } else {
            login(this, this.state.phone, this.state.password);
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.textBox}>
                    <CXIcon name='phone' size={24} color={this.state.phone_focus ? '#feeb46' : '#a4a4a4'} style={styles.icon}></CXIcon>
                    <TextInput
                        placeholder="请输入手机号"
                        textContentType="username"
                        keyboardType='phone-pad'
                        placeholderTextColor="#a4a4a4"
                        maxLength={11}
                        autoCorrect={false}
                        style={styles.input}
                        onChangeText={(phone) => this.setState({phone})}
                        onFocus={()=>this._focus('phone')}
                    />
                </View>
                <View style={styles.textBox}>
                    <CXIcon name='password' size={17} color={this.state.pwd_focus ? '#feeb46' : '#a4a4a4'} style={[styles.icon, styles.pwdIcon]}></CXIcon>
                    <TextInput
                        placeholder="请输入密码"
                        textContentType="password"
                        secureTextEntry={true}
                        placeholderTextColor="#a4a4a4"
                        autoCorrect={false}
                        style={styles.input}
                        onChangeText={(password) => this.setState({password})}
                        onFocus={()=>this._focus('pwd')}
                    />
                </View>
                <View style={styles.buttomBox}>
                    <TouchableWithoutFeedback
                        onPress={() => this._handleLogin()}
                    >
                        <Text style={styles.buttom}>登录</Text>
                    </TouchableWithoutFeedback>
                </View>
                <View style={styles.link}>
                    <Text style={styles.linkTxt}>
                        账号注册
                    </Text>
                    <Text style={styles.linkTxt}>
                        忘记密码？
                    </Text>
                </View>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {}
  }
  
  export default connect(mapStateToProps)(LoginScreen);